<template>
    <div class="fill flex justify-center align-center flex-direction">
        <Menus :webconfig="dynamicDetail.webinfo" :data="dynamicDetail.menusnav"></Menus>
        <div class="detailHeaderBox"></div>
        <div class="fill flex justify-center align-center flex-direction">
            <div class="detailCoreBox flex flex-direction align-start">
                <div class="detailTitleText">{{ dynamicDetail.detail.dynamic_title }}</div>
                <div class="countBox flex justify-end align-center">
                    <span>点赞：{{ dynamicDetail.detail.collect_count }}</span>
                    <span>收藏：{{ dynamicDetail.detail.collect_count }}</span>
                </div>
                <div class="detailDescription">{{ dynamicDetail.detail.dynamic_description }}</div>
                <div class="detailContentText vHighlight" v-html="dynamicDetail.detail.dynamic_contents" v-highlight>
                </div>
                <Share @oncollectszanschange="cellecsZanstHandler" :detail="dynamicDetail.detail"></Share>
                <Comment :articleid="dynamicDetail.detail.id" :commentdata="dynamicDetail.comment"
                    :collects="dynamicDetail.detail.collectusers"></Comment>
            </div>
        </div>
        <Copy :webconfig="dynamicDetail.webinfo" :frendlyData="dynamicDetail.friends" :menuDatas="dynamicDetail.menus"
            :bussinessData="dynamicDetail.bussiness" :questionsData="dynamicDetail.questions.data"></Copy>
    </div>
</template>
<script>
import { Ads } from '../assets/inc/tencentAds';
import { extendsMenus, extendsParams, extendsEncrypte } from '~/assets/inc/common.js';
import { apis } from '~/assets/inc/apis.js';
export default {
    watchQuery: true,
    async asyncData(context) {
        extendsEncrypte({ id: context.query.id }, context.$axios);
        let { data } = await context.$axios.post(apis.getDynamicDetailAPI, extendsParams({ id: context.query.id }));
        data.message.menusnav = extendsMenus([...data.message.menus]);
        return { dynamicDetail: data.message };
    },
    head() {
        return {
            title: this.dynamicDetail.detail ? '欽天監-' + this.dynamicDetail.detail.dynamic_title : '欽天監-强势文化传播中心“文化自信、民族复兴”',
            meta: [
                { hid: 'keywords', name: 'keywords', content: this.dynamicDetail.detail.dynamic_keywords || '欽天監、钦天监、星象、国学、经典、易经、八卦、命理、风水、玄学' },
                { hid: 'description', name: 'description', content: this.dynamicDetail.detail.dynamic_description || '荧荧火光，离离乱惑-为天地立心,为生民立命,为往圣继绝学,为万世开太平！“文化自信、民族复兴”' }
            ]
        }
    },
    filters: {
        convertDes: function (value) {
            if (value && value.length > 48) {
                return value.substring(0, 48) + '...';
            } else {
                return value;
            }
        },
    },
    data() {
        return {
            dynamicDetail: {},
            Ads: Ads,
        }
    },
    mounted() {
        this.$store.commit('setLoading', false);
    },
    beforeDestroy() {
        this.$store.commit('setLoading', true);
    },
    methods: {
        //收藏 | 点赞数据更新
        cellecsZanstHandler(e) {
            this.dynamicDetail.detail.iscollects = e.iscollects;
            this.dynamicDetail.detail.iszans = e.iszans;
            this.dynamicDetail.detail.zans_count = e.zans_count;
            this.dynamicDetail.detail.collect_count = e.collect_count;
            this.dynamicDetail.detail.collectusers = e.collectusers;
        },
    }
}
</script>
<style lang="scss" scoped>
.detailCoreBox {
    width: 1200px;
    max-width: 1200px;
    padding: 150px 0 50px 0;
    color: #1c1c1c;

    .detailTitleText {
        font-size: 22px;
        font-weight: bold;
        padding-bottom: 20px;
        color: whitesmoke;
    }

    .countBox {
        font-size: 14px;
        padding-bottom: 10px;

        span {
            padding: 0 10px;
            color: #c7c7c7;
        }
    }

    .detailDescription {
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px);
        padding: 10px;
        border-radius: 10px;
        color: #A8A8A8;
    }

    .detailContentText {
        max-width: 100%;
        font-size: 18px;
        white-space: pre-wrap;
        word-wrap: break-word;
        margin-top: 10px;
        color: gray;

        img {
            width: 100%;
            max-width: 100%;
        }

        p {
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        /deep/pre {
            white-space: pre-wrap !important;
            word-wrap: break-word !important;
            padding: 20px;
            border-radius: 10px;
            font-family: console;
            font-size: 49px !important;
        }
    }
}

@media screen and (min-width:0px) and (max-width:1280px) {
    .detailCoreBox {
        width: 100%;
        max-width: 100%;
        padding: 7rem 0 0 0;
        color: #1c1c1c;
        justify-content: center;
        flex-flow: column;


    }
}
</style>